<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 学生知识管理系统</title>
    <link rel="shortcut icon" href="/public/favicon.ico" type="image/x-icon">
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入 Inter 字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#6366F1',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                        info: '#3B82F6',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1), 0 8px 10px -6px rgba(59, 130, 246, 0.1);;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.3s ease-out;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(10px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
    <!-- 引入 jQuery -->
    <script src="/jquery-3.7.1.min.js"></script>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex items-center">
<!-- 背景装饰 -->
<div class="fixed inset-0 overflow-hidden z-0">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-primary opacity-5"></div>
    <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl"></div>
    <div class="absolute -bottom-32 -left-32 w-96 h-96 bg-accent/10 rounded-full filter blur-3xl"></div>
</div>

<div class="container mx-auto px-4 py-8 relative z-10">
    <div class="max-w-md mx-auto">
        <!-- 品牌标识 -->
        <div class="text-center mb-8 animate-fade-in">
            <div class="w-16 h-16 bg-gradient-primary rounded-lg flex items-center justify-center mx-auto mb-4 shadow-lg transform hover:scale-110 transition-transform duration-300">
                <i class="fa fa-graduation-cap text-white text-2xl"></i>
            </div>
            <h1 class="text-2xl md:text-3xl font-bold text-dark">学生知识管理系统</h1>
            <p class="text-gray-500 mt-2">登录账号，继续您的学习之旅</p>
        </div>

        <!-- 登录表单 -->
        <div class="bg-white rounded-2xl card-shadow p-6 md:p-8 animate-slide-up hover:shadow-glow transition-shadow duration-500">
            <h2 class="text-xl md:text-2xl font-semibold mb-6 text-center">用户登录</h2>

            <!-- 错误提示 -->
            <div id="error" class="text-center mb-4 hidden">
                <div class="inline-flex items-center px-4 py-2 bg-blue-100 text-blue-700 rounded-full" role="alert">
                    <i class="fa fa-times mr-2 text-blue-600"></i>
                    <span id="error-message" class="text-blue-700"></span>
                </div>
            </div>

            <form id="loginForm" class="space-y-5">
                <!-- 用户名 -->
                <div class="space-y-2">
                    <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-user text-gray-400"></i>
                        </div>
                        <input type="text" id="username" class="pl-10 pr-4 py-3 w-full border border-gray-300 rounded-lg input-focus" placeholder="请输入用户名" required>
                    </div>
                </div>

                <!-- 密码 -->
                <div class="space-y-2">
                    <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-gray-400"></i>
                        </div>
                        <input type="password" id="password" class="pl-10 pr-4 py-3 w-full border border-gray-300 rounded-lg input-focus" placeholder="请输入密码" required>
                    </div>
                </div>

                <!-- 登录按钮 -->
                <button type="submit" id="loginBtn" class="w-full bg-gradient-primary text-white font-medium py-3 px-4 rounded-lg btn-hover flex items-center justify-center group">
                    <i class="fa fa-sign-in mr-2 group-hover:translate-x-1 transition-transform"></i> 登录
                </button>

                <!-- 注册链接 -->
                <div class="text-center text-sm text-gray-500 mt-4">
                    还没有账号? <a href="/register.html" class="text-primary font-medium hover:underline group">
                            <span class="group-hover:inline-flex group-hover:items-center">
                                立即注册 <i class="fa fa-arrow-right ml-1 group-hover:ml-2 transition-all"></i>
                            </span>
                </a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 加载中遮罩 -->
<div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
    <div class="bg-white p-6 rounded-lg shadow-xl flex items-center">
        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mr-4"></div>
        <span class="text-lg font-medium text-gray-800">登录中，请稍候...</span>
    </div>
</div>

<script>
    $(document).ready(function() {
        // 清除URL中的参数
        if (window.history.replaceState) {
            window.history.replaceState(null, null, window.location.pathname);
        }

        // 表单提交事件处理
        $('#loginForm').on('submit', function(e) {
            e.preventDefault(); // 阻止表单默认提交

            // 隐藏错误信息
            $('#error').addClass('hidden');
            $('#error-message').text(''); // Clear previous message

            // 获取表单数据
            const username = $('#username').val().trim();
            const password = $('#password').val().trim();

            if (!username || !password) {
                $('#error-message').text('用户名和密码均为必填项');
                 $('#error').removeClass('hidden');
                return;
            }

            // 显示加载中
            $('#loadingOverlay').removeClass('hidden');

            // 发送 AJAX 请求到后端接口
            $.ajax({
                url: 'http://localhost:8082/login',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ username, password }),
                success: function(result) {
                    // 隐藏加载中
                    $('#loadingOverlay').addClass('hidden');

                    if (result.code === 200) {
                        // 登录成功，直接从返回数据中获取信息并存入 sessionStorage
                        if (result.data) {
                            const userData = result.data;
                            const avatarUrl = userData.avatarUrl ? userData.avatarUrl : 'default.jpg'; // Store only filename, use default.jpg if empty

                            sessionStorage.setItem('userId', userData.userId);
                            sessionStorage.setItem('username', userData.username);
                            sessionStorage.setItem('userRole', userData.role);
                            sessionStorage.setItem('avatarUrl', avatarUrl);

                            // 清除URL中的参数
                            window.history.replaceState(null, null, window.location.pathname);

                            // 根据用户角色跳转到不同的主页
                            if (userData.role === 'ADMIN') {
                                window.location.href = '/hou/index.html';
                            } else if (userData.role === 'STUDENT') {
                                window.location.href = '/qian/home.html';
                            } else {
                                // 如果角色未知，可以默认跳转到一个页面或显示错误
                                console.warn('未知用户角色:', userData.role);
                                // 例如，可以跳转到默认页面或显示错误信息
                                // window.location.href = '/default/home.html';
                                // $('#error').text('未知用户角色，无法跳转').show();
                            }

                        } else {
                            console.warn('登录成功但后端未返回数据', result);
                            $('#error-message').text('登录成功，但未获取到用户信息');
                            $('#error').removeClass('hidden');
                        }
                    } else {
                        // 登录失败，显示错误信息
                        $('#error-message').text(result.msg || '登录失败，请检查用户名或密码');
                        $('#error').removeClass('hidden');
                    }
                },
                error: function(xhr, status, error) {
                    // 隐藏加载中
                    $('#loadingOverlay').addClass('hidden');

                    console.error('登录请求失败:', error);
                    $('#error-message').text('服务器错误，请稍后重试');
                    $('#error').removeClass('hidden');
                }
            });
        });
    });
</script>
</body>
</html>